<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>帅小铺-实体创业社群服务平台</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="address=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" href="/assets/H5/css/m.all_v20190307183824.css">
<link rel="stylesheet" href="/assets/H5/css/m5.city_v20180716182440.css?v=1">
<script type="text/javascript" src="/assets/layui/layui.js"></script>
</head>
<body>
	<div class="body_div">
		<div class="search search_container_city search_container">
			<form action="">
				<div class="search_input">
					<input type="text" name="key" id="keyword" class="input_keys" value="" autocomplete="off" placeholder="输入城市名或首字母">
				</div>
				<div class="search_but body_bg" lay-event="searchCity"></div>
			</form>
			<div class="search_ajax" style="display: block;">
				<ul id="search_mes"></ul>
			</div>
			
		</div>
		<!-- 城市搜索-->
		<div class="city_box">
			<!-- <div class="local-city">正在定位中，请稍后...</div> -->
			<h3>热门城市</h3>
			<ul class="city_lst hot">
				<li><a href="javascript:;" lay-event="changecity" data-id="500100">重庆</a></li>
				<li><a href="javascript:;" lay-event="changecity" data-id="650100">乌鲁木齐</a></li>
				<li><a href="javascript:;" lay-event="changecity" data-id="652800">巴州</a></li>
			</ul>
			<h3>按字母排序</h3>
			<ul class="letters_lst">
				<li><a href="javascript:;">A</a></li>
				<li><a href="javascript:;">B</a></li>
				<li><a href="javascript:;">C</a></li>
				<li><a href="javascript:;">D</a></li>
				<li><a href="javascript:;">E</a></li>
				<li><a href="javascript:;">F</a></li>
				<li><a href="javascript:;">G</a></li>
				<li><a href="javascript:;">H</a></li>
				<li><a href="javascript:;">J</a></li>
				<li><a href="javascript:;">K</a></li>
				<li><a href="javascript:;">L</a></li>
				<li><a href="javascript:;">M</a></li>
				<li><a href="javascript:;">N</a></li>
				<li><a href="javascript:;">P</a></li>
				<li><a href="javascript:;">Q</a></li>
				<li><a href="javascript:;">R</a></li>
				<li><a href="javascript:;">S</a></li>
				<li><a href="javascript:;">T</a></li>
				<li><a href="javascript:;">W</a></li>
				<li><a href="javascript:;">X</a></li>
				<li><a href="javascript:;">Y</a></li>
				<li><a href="javascript:;">Z</a></li>
			</ul>
			<th:block th:each="item:${citys}" th:if="${not #lists.isEmpty(item.value)}">
				<h4>
				<p>
					<span th:text="${item.key}"></span><span th:text="${'(以'+ item.key +'为开头的城市名)'}"></span>
				</p>
				</h4>
				<ul class="city_lst" th:if="${not #lists.isEmpty(item.value)}">
					<li th:each="city:${item.value}"><a href="javascript:;" th:attr="data-id=${city.aid}" lay-event="changecity" th:text="${city.shortName}" class="nobor"></a></li>
				</ul>
			</th:block>
		</div>
	</div>
<script type="text/javascript">
	layui.config({
        base: '/assets/module/'
	}).extend({
	    notice: 'notice/notice',
	}).use(['layer', 'form', 'formX', 'setter', 'mynotice', 'admin', 'ax', 'util'], function () {
	    var $ = layui.jquery;
	    var layer = layui.layer;
	    var form = layui.form;
	    var formX = layui.formX;
	    var setter = layui.setter;
	    var mynotice = layui.mynotice;
	    var admin = layui.admin;
	    var $ax = layui.ax;
	    var util = layui.util;
	    
		var scrTop;
		$(window).bind("scroll",function(){
			scrTop=document.body.scrollTop;
		});
		$(".letters_lst li").each(function(i){
			$(this).bind("click",function(){
				var thatTop=$(".city_box h4").get(i).getBoundingClientRect().top;
				if(document.documentElement){
					document.documentElement.scrollTop=scrTop+thatTop;
				}else{
					document.body.scrollTop=scrTop+thatTop;
				}
			})
		})
		
		util.event('lay-event', {
			changecity: function(){
				var id  = $(this).data('id');
	    		var ajax = new $ax('/api/city/change/' + id, 'post', function (res) {
	    			window.location.href = document.referrer;
	    	    }, function (res) {
	    	    	mynotice.error(res.msg);
	    	    });
	    	    ajax.start();
			},
			searchCity: () => { // 搜索站点
	    		var ajax = new $ax('/api/city/query', 'get', function (res) {
	    			var html = '';
	    			if(res.data.length > 0){
	    				html = '<ul class="city_sug">';
	    				$.each(res.data, (i, v) => {
	    					html += '<li class=""><a href="javascript:void(0);" data-id="'+ v.aid +'" lay-event="changecity">'+ v.name +'</a></li>';
	        			})
	        			html += '</ul>';
	    			}
	    			$('#search_mes').html(html);
	    			$(".search_ajax").css("display","block");  
	    	    }, function (res) {
	    	    	mynotice.error(res.msg);
	    	    });
	    		ajax.set('citySite', $('#keyword').val());
	    	    ajax.start();
	    	}
		});
			
	});
</script>
</body>
</html>